<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 三石影视</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-gray-100">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-lg">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between h-16">
                <div class="flex">
                    <div class="flex-shrink-0 flex items-center">
                        <a href="{{ url_for('index') }}" class="text-2xl font-bold text-gray-800">三石影视</a>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="relative" id="userMenu">
                        <button id="userMenuBtn" class="flex items-center text-gray-700 hover:text-gray-900">
                            <i class="fas fa-user-circle text-2xl"></i>
                        </button>
                        <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1">
                            <a href="{{ url_for('profile') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
                            <a href="{{ url_for('admin_dashboard') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">管理控制台</a>
                            <a href="{{ url_for('logout') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <!-- 页面标题 -->
        <div class="mb-6">
            <h1 class="text-2xl font-semibold text-gray-900">用户管理</h1>
        </div>

        <!-- 用户列表 -->
        <div class="bg-white shadow rounded-lg">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户名</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">邮箱</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">收藏数</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">历史记录数</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for user in users %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ user.id }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">{{ user.username }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">{{ user.email }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {% if user.role == 'admin' %}bg-red-100 text-red-800{% else %}bg-green-100 text-green-800{% endif %}">
                                    {{ user.role }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">{{ user.favorites|length }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">{{ user.history|length }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button onclick="showPassword('{{ user.id }}')" class="text-blue-600 hover:text-blue-900 mr-4">
                                    <i class="fas fa-eye"></i>
                                    查看密码
                                </button>
                                <button onclick="resetPassword('{{ user.id }}')" class="text-indigo-600 hover:text-indigo-900 mr-4">
                                    <i class="fas fa-key"></i>
                                    重置密码
                                </button>
                                {% if user.role != 'admin' %}
                                <button onclick="deleteUser('{{ user.id }}')" class="text-red-600 hover:text-red-900">
                                    <i class="fas fa-trash"></i>
                                    删除
                                </button>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 添加提示框 -->
    <div id="toast" class="fixed top-4 right-4 bg-gray-800 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-[-100%] opacity-0 transition-all duration-300">
        <span id="toast-message"></span>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 用户菜单显示控制
        const userMenuBtn = document.getElementById('userMenuBtn');
        const userDropdown = document.getElementById('userDropdown');

        if (userMenuBtn && userDropdown) {
            userMenuBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                userDropdown.classList.toggle('hidden');
            });
            
            // 点击其他地方关闭菜单
            document.addEventListener('click', (e) => {
                if (!userMenuBtn.contains(e.target) && !userDropdown.contains(e.target)) {
                    userDropdown.classList.add('hidden');
                }
            });
        }

        // 显示提示框
        function showToast(message, type = 'success') {
            const toast = document.getElementById('toast');
            const toastMessage = document.getElementById('toast-message');
            if (!toast || !toastMessage) return;

            toast.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg transform translate-y-[-100%] opacity-0 transition-all duration-300 ${
                type === 'success' ? 'bg-green-600' : 'bg-red-600'
            } text-white`;
            
            toastMessage.textContent = message;
            toast.style.transform = 'translateY(0)';
            toast.style.opacity = '1';
            
            setTimeout(() => {
                toast.style.transform = 'translateY(-100%)';
                toast.style.opacity = '0';
            }, 3000);
        }

        // 查看密码
        async function showPassword(userId) {
            try {
                const response = await fetch('/admin/users/get-password/' + userId);
                const data = await response.json();
                if (data.success) {
                    showToast('用户密码: ' + data.password);
                } else {
                    showToast(data.error || '获取密码失败', 'error');
                }
            } catch (error) {
                console.error('获取密码失败:', error);
                showToast('获取密码失败', 'error');
            }
        }

        // 重置密码
        async function resetPassword(userId) {
            const newPassword = prompt('请输入新密码：');
            if (!newPassword) return;

            try {
                const response = await fetch('/admin/users/reset-password/' + userId, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ password: newPassword })
                });
                const data = await response.json();
                
                if (response.ok) {
                    showToast('密码重置成功');
                } else {
                    showToast(data.error || '密码重置失败', 'error');
                }
            } catch (error) {
                console.error('重置密码失败:', error);
                showToast('重置密码失败', 'error');
            }
        }

        // 删除用户
        async function deleteUser(userId) {
            if (!confirm('确定要删除这个用户吗？此操作不可恢复！')) return;

            try {
                const response = await fetch(`/admin/users/delete/${userId}`, {
                    method: 'POST',
                });
                const data = await response.json();
                
                if (response.ok) {
                    showToast('用户删除成功');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    showToast(data.error || '删除用户失败', 'error');
                }
            } catch (error) {
                console.error('删除用户失败:', error);
                showToast('删除用户失败', 'error');
            }
        }

        // 为所有按钮添加加载状态
        document.querySelectorAll('button').forEach(button => {
            button.addEventListener('click', function() {
                if (this.dataset.loading !== 'true') {
                    const originalText = this.innerHTML;
                    this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 处理中...';
                    this.dataset.loading = 'true';
                    this.disabled = true;

                    setTimeout(() => {
                        this.innerHTML = originalText;
                        this.dataset.loading = 'false';
                        this.disabled = false;
                    }, 2000);
                }
            });
        });
    });
    </script>
</body>
</html> 